<template>
  <el-main>
    <el-card
      shadow="never"
      header="文件示例"
    >
      <sc-upload-file
        v-model="fileurl"
        :limit="3"
        :data="{ otherData: 'demo' }"
        tip="最多上传3个文件,单个文件不要超过10M,请上传xlsx/docx格式文件"
      >
        <el-button
          type="primary"
          icon="el-icon-upload"
        >
          上传附件
        </el-button>
      </sc-upload-file>
    </el-card>

    <el-card
      shadow="never"
      header="文件示例(值为对象数组,适合保存原始文件名)"
    >
      <sc-upload-file
        v-model="fileurlArr"
        :limit="3"
        tip="最多上传3个文件,单个文件不要超过10M,请上传xlsx/docx格式文件"
      >
        <el-button
          type="primary"
          icon="el-icon-upload"
        >
          上传附件
        </el-button>
      </sc-upload-file>
    </el-card>

    <el-card
      shadow="never"
      header="图片卡片示例(已开启拖拽排序)"
    >
      <sc-upload-multiple
        v-model="fileurl2"
        draggable
        :limit="3"
        tip="最多上传3个文件,单个文件不要超过10M,请上传图像格式文件"
      />
    </el-card>

    <el-card
      shadow="never"
      header="单图像示例"
    >
      <el-space
        wrap
        :size="8"
      >
        <sc-upload v-model="fileurl3" />
        <sc-upload
          v-model="fileurl4"
          title="自定义标题"
          icon="el-icon-picture"
        />
        <sc-upload
          v-model="fileurl5"
          :api-obj="uploadApi"
          accept="image/jpg,image/png"
          :on-success="success"
          :width="220"
        >
          <div class="custom-empty">
            <el-icon><el-icon-upload /></el-icon>
            <p>自定义插槽</p>
          </div>
        </sc-upload>
        <sc-upload
          v-model="fileurl6"
          round
          icon="el-icon-avatar"
          title="开启圆形"
        />
        <sc-upload
          v-model="fileurl7"
          title="开启剪裁"
          :cropper="true"
          :compress="1"
          :aspect-ratio="1 / 1"
        />
      </el-space>
    </el-card>

    <el-card
      shadow="never"
      header="在验证表单中使用"
    >
      <el-form
        ref="ruleForm"
        :model="form"
        :rules="rules"
        label-width="100px"
      >
        <el-form-item
          label="身份证"
          required
        >
          <el-space
            wrap
            :size="8"
          >
            <el-form-item prop="file1">
              <sc-upload
                v-model="form.file1"
                title="人像面"
              />
            </el-form-item>
            <el-form-item prop="file2">
              <sc-upload
                v-model="form.file2"
                title="国徽面"
              />
            </el-form-item>
          </el-space>
        </el-form-item>
        <el-form-item
          label="其他凭证"
          prop="file3"
        >
          <sc-upload-multiple v-model="form.file3" />
        </el-form-item>
        <el-form-item
          label="附件"
          prop="file4"
        >
          <sc-upload-file
            v-model="form.file4"
            :limit="1"
            drag
          >
            <el-icon class="el-icon--upload">
              <el-icon-upload-filled />
            </el-icon>
            <div class="el-upload__text">
              Drop file here or <em>click to upload</em>
            </div>
          </sc-upload-file>
        </el-form-item>
        <el-form-item
          label="日期"
          prop="date"
        >
          <el-date-picker
            v-model="form.date"
            type="date"
            placeholder="选择日期"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="submitForm"
          >
            保存
          </el-button>
          <el-button @click="resetForm">
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </el-main>
</template>

<script>
export default {
  name: "Upload",
  data() {
    return {
      uploadApi: this.$API.common.upload,
      fileurlArr: [
        {
          name: "销售合同模板.xlsx",
          url: "http://www.scuiadmin.com/files/220000198611262243.xlsx",
        },
        {
          name: "企业员工联系方式.xlsx",
          url: "http://www.scuiadmin.com/files/350000201004261875.xlsx",
        },
      ],
      fileurl:
        "http://www.scuiadmin.com/files/220000198611262243.xlsx,http://www.scuiadmin.com/files/350000201004261875.xlsx",
      fileurl2: "img/auth_banner.jpg,img/avatar3.gif",
      fileurl3: "img/auth_banner.jpg",
      fileurl4: "",
      fileurl5: "",
      fileurl6: "",
      fileurl7: "",
      form: {
        file1: "",
        file2: "",
        file3: "",
        file4: "",
        date: "",
      },
      rules: {
        file1: [{ required: true, message: "请上传", trigger: "change" }],
        file2: [{ required: true, message: "请上传", trigger: "change" }],
        file3: [{ required: true, message: "请上传", trigger: "change" }],
        file4: [{ required: true, message: "请上传附件", trigger: "change" }],
        date: [{ required: true, message: "请选择日期", trigger: "change" }],
      },
    };
  },
  methods: {
    success(response) {
      this.$alert(
        `success函数钩子，可用于类似OCR返回信息，return false后阻止后续执行，回调参数打开控制台查看`,
        {
          title: "提示",
          type: "success",
        }
      );
      console.log(response);
      return false;
    },
    submitForm() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          alert("请看控制台输出");
          console.log(this.form);
        } else {
          return false;
        }
      });
    },
    resetForm() {
      this.$refs.ruleForm.resetFields();
    },
  },
};
</script>

<style scoped>
.el-card + .el-card {
  margin-top: 15px;
}
.imglist .el-col + .el-col {
  margin-left: 8px;
}

.custom-empty {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #8c939d;
  border-radius: 5px;
}
.custom-empty i {
  font-size: 30px;
  color: #fff;
}
.custom-empty p {
  font-size: 12px;
  font-weight: normal;
  color: #fff;
  margin-top: 10px;
}
</style>
